<template>
  <custom-modal
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="$t('processDetail')"
    :destroyOnClose="true"
    :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="primary" @click.stop="handleCancel">{{ $t('back') }}</a-button>
    </template>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record,index)=>index"
      :columns="columns"
      :dataSource="tableData"
      :showSizeChanger="false"
      class="h100 withMinHeightTbodyBox"
      :scrollX="1050"
      :rowClassName="record => record.status===3 ? 'highlightFailedFileRow': ''"
    >
      <template
        slot="operation"
        slot-scope="text"
      >
        <table-ellipsis :text="text"></table-ellipsis>
      </template>
      <template
        slot="result"
        slot-scope="text"
      >
        <table-ellipsis :text="$t(statusString[text])"></table-ellipsis>
      </template>
      <template
        slot="actionStartTime"
        slot-scope="text"
      >
        <table-ellipsis :text="text?$options.filters.moment(text):'-'"></table-ellipsis>
      </template>
      <template
        slot="actionEndTime"
        slot-scope="text"
      >
        <table-ellipsis :text="text?$options.filters.moment(text):'-'"></table-ellipsis>
      </template>

    </s-table>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import { STable } from '@/components'
import { processFileColums } from './config'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'

export default {
  name: 'SummaryModal',
  components: {
    CustomModal,
    STable,
    TableEllipsis
  },
  props: {
    width: {
      type: Number,
      default: 800
    },
    processId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      columns: processFileColums,
      tableData: [],
      statusString: {
        0: 'notStart',
        1: 'running',
        2: 'success',
        3: 'fail'
      }
    }
  },
  computed: {

  },
  mounted () {
  },
  methods: {
    handleCancel () {
      this.visible = false
    },
    getLoadData () {
      const vm = this
      vm.$api.resourceProcess({ id: vm.processId }).then(res => {
        vm.tableData = res.data
      })
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getLoadData()
      }
    }
  }
}
</script>
<style>
.highlightFailedFileRow{
  color: red;
}
</style>
